<template>
  <div>
    <el-table :data="nowTableData" border style="width: 100%">
      <el-table-column prop="userHead" label="用户头像">
        <template slot-scope="scope">
          <img class="userHead" :src="scope.row.userHead" />
        </template>
      </el-table-column>
      <el-table-column prop="date" label="注册日期"></el-table-column>
      <el-table-column prop="username" label="用户姓名"></el-table-column>
      <el-table-column prop="email" label="用户邮箱"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            @click="handleToFreeze(scope.$index, scope.row)"
          >{{ scope.row.isFreeze ? '已冻结' : '未冻结' }}</el-button>
          <el-button size="small" @click="handleToDelete(scope.$index, scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="page"
      background
      layout="prev, pager, next"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :total="tableData.length"
    ></el-pagination>
  </div>
</template>

<script>
import { getuserlist, postuserlist, postdeleteruser } from "network/users";
export default {
  name: "users",
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 2,
    };
  },
  mounted() {
    this.getuserlist();
  },
  computed:{
    nowTableData(){
      //数组截取 开始位置 到结束位置 
      return this.tableData.slice((this.currentPage - 1)*this.pageSize, this.currentPage*this.pageSize) || []
    }
  },
  methods: {
    // 获取用户信息
    getuserlist() {
      getuserlist().then((res) => {
        //  var status = res.data.status;
        //    if(status === 0){
        //        this.tableData = res.data.data.usersList;
        //    }
      });
    },
    // 修改冻结未冻结
    handleToFreeze(index, row) {
      var data = { email: row.email, isFreeze: !row.isFreeze };
      postuserlist(data).then((res) => {
        var status = res.data.status;
        if (status === 0) {
          //弹出提示框 有个回调 利用响应式数据 修改成功后就修改 数据源的isfreeze值 修改三目判断
          this.$alert("冻结操作已成功", "信息", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.tableData[index].isFreeze = !row.isFreeze;
            },
          });
        } else {
          //没有修改成功的话 把原本的值赋值回去 其实也可以不用这个回调 因为 不是通过点击取反修改前端的显示 还是通过反复的数据却决于回调的时候 时候取反
          //失败的时候 是不会发生变化的
          this.$alert("冻结操作失败", "信息", {
            confirmButtonText: "确定",
            // callback:(action)=>{
            //   this.tableData[index].isFreeze = row.isFreeze;
            // }
          });
        }
      });
    },

    //删除操作
    handleToDelete(index, row) {
      var data = { email: row.email };
      postdeleteruser(data).then((res) => {
        // var status = res.data.status;
        if (status === 0) {
          //删除成功后 进行弹窗的回调 是进行 在数据的源的删除 而不是重新刷新页面了 
          this.$alert("删除操作已成功", "信息", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.tableData.splice(index, 1);
            },
          });
        } else {
          this.$alert("删除操作失败", "信息", {
            confirmButtonText: "确定",
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.page{ margin-top:20px;}
.userHead{ width:50px; height:50px; border-radius: 50%; overflow:hidden;}
</style>
